
<template>
  <div class="main-box">
    <k-theme-selecter class="selecter " />
    <div class="main">
      <div class="bg"></div>
      <k-clock />
    </div>
  </div>
</template>
<script setup>
import KThemeSelecter from './components/KThemeSelecter.vue';
import KClock from './components/KClock.vue';
</script>
<style scoped lang="scss">
@import "./theme.scss";

:deep(*),
* {
  transition: 0.3s;
}

.main-box {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  @include useTheme {
    background: getVar('rootBG');
  }

  .selecter {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
  }

  &>.main {
    position: relative;
    width: 90vmin;
    height: 90vmin;

    &>.bg {
      @include useTheme {
        background: radial-gradient(circle, getVar('contentColor') 6%, transparent 0),
          conic-gradient(from 86deg, getVar('contentColor') 9deg, transparent 0) center/100%, conic-gradient(hsl(0deg, 100%, 50%), hsl(120deg, 100%, 50%), hsl(240deg, 100%, 50%), hsl(360deg, 100%, 50%)) center/100%;
      }

      z-index: -1;

      @include useTheme {
        filter: getVar('bgFilter');
      }

      border-radius: 50%;
    }

    &>* {
      position: absolute;
      inset: 0;
    }
  }
}
</style>
